<template>
  <backContainer
    v-loading="allLoading && type == 'edit'"
    :element-loading-text="`AI导入中，进度：${
      importProgress ? importProgress.toFixed(2) : '0.00'
    }%`"
    element-loading-spinner="el-icon-loading"
  >
    <div class="card rela" v-loading="loading">
      <!--  考核内容异常    -->
      <div
        class="abnormal_tip"
        v-if="active == 1 && exceptionTreeList.length > 0"
      >
        <div @click="abnormalState = !abnormalState" class="top">
          <i class="el-icon-warning"></i>
          考核内容异常
          <i
            class="el-icon-arrow-down"
            :class="{ rotate_180: abnormalState }"
          ></i>
        </div>
        <div class="content" :class="{ actived: abnormalState }">
          <div class="all_expand">
            <div @click="handleTurn" class="item">
              <img
                v-if="!isClose_abnormal"
                src="@/assets/images/courseAdd/expand.png"
                alt=""
              />
              <img v-else src="@/assets/images/courseAdd/shrink.png" alt="" />
              {{ !isClose_abnormal ? "全部展开" : "全部收起" }}
            </div>
          </div>
          <div class="tree">
            <courseTrees
              ref="abnormal_trees_ref"
              :type="type"
              exceptionType="abnormal"
              :data="exceptionTreeList"
            >
            </courseTrees>
          </div>
        </div>
      </div>
      <el-tabs v-model="active" @tab-click="formTabClick">
        <!-- 基本信息 -->
        <el-tab-pane label="课程简介" name="0">
          <!-- 用于编辑和添加 状态 -->
          <div v-if="$route.query.type == 'add' || $route.query.type == 'edit'">
            <div class="baseInfo">
              <el-form
                style="margin-top: 20px"
                ref="form"
                :model="form"
                :rules="rules"
                label-width="130px"
              >
                <el-row>
                  <el-row>
                    <!-- 课程名称 -->
                    <el-col :span="12" id="course_name">
                      <el-form-item label="课程名称" i prop="courseName">
                        <div v-if="type == 'detail' || type == 'audit'">
                          {{ form.courseName }}
                        </div>
                        <el-input
                          v-else
                          style="width: 374px"
                          oninput="value=value.replace(/\//g, '')"
                          v-model="form.courseName"
                          placeholder="请输入课程名称"
                          maxlength="30"
                          show-word-limit
                        />
                      </el-form-item>
                    </el-col>
                    <!-- 课程类型 -->
                    <el-col :span="12" id="course_type">
                      <el-form-item
                        label="课程类型"
                        :prop="courseTemplate == 1 ? '' : 'courseType'"
                      >
                        <div v-if="type == 'detail' || type == 'audit'">
                          {{ form.courseType }}
                        </div>
                        <el-select
                          @change="courseTypeChange"
                          :disabled="courseTemplate == 1 ? true : false"
                          placeholder="请选择课程类型"
                          clearable
                          filterable
                          v-model="form.courseType"
                        >
                          <!-- 当通用课程模式 删除工学一体化课程选项 -->
                          <el-option
                            v-if="!(item.value == '3' && courseTemplate == 0)"
                            v-for="(item, index) of dict.type.course_type"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row v-if="form.courseType != 1">
                    <!--   专业大类     -->
                    <el-col :span="12" id="major_type">
                      <el-form-item label="专业大类" prop="majorType">
                        <div v-if="type == 'detail' || type == 'audit'">
                          {{ form.majorType }}
                        </div>
                        <el-select
                          @change="getMajorNameList(true)"
                          placeholder="请选择专业大类"
                          clearable
                          filterable
                          v-model="form.majorType"
                        >
                          <el-option
                            v-for="(item, index) of dict.type.major_category"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!--   专业名称     -->
                    <el-col :span="12" id="major_name_id">
                      <el-form-item label="专业名称" prop="majorNameId">
                        <div v-if="type == 'detail' || type == 'audit'">
                          {{ form.majorName }}
                        </div>
                        <el-select
                          placeholder="请选择专业名称"
                          clearable
                          filterable
                          v-model="form.majorNameId"
                        >
                          <el-option
                            v-for="(item) of majorNameList"
                            :key="item.id"
                            :label="item.majorName"
                            :value="item.id"
                          >
                            {{ item.majorName }}
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- 课程要求 -->
                    <el-col :span="12">
                      <el-form-item label="课程要求" prop="passAllStatus">
                        <div class="passAllStatus">
                          <el-radio-group
                            v-model="form.passAllStatus"
                            :disabled="type == 'detail'"
                          >
                            <el-radio :label="0">
                              学生考核结果不影响结束课程
                            </el-radio>
                            <el-radio :label="1">
                              所有学生所有考核都通过可结束课程
                            </el-radio>
                          </el-radio-group>
                        </div>
                      </el-form-item>
                    </el-col>
                    <!-- 强制学习要求 -->
                    <el-col :span="12">
                      <el-form-item label="学习要求" prop="jumpStatus">
                        <div class="passAllStatus">
                          <el-radio-group
                            v-model="form.jumpStatus"
                            :disabled="type == 'detail'"
                          >
                            <el-radio :label="0">
                              不限制课程内容的学习顺序
                            </el-radio>
                            <el-radio :label="1">
                              强制按照课程内容顺序学习
                            </el-radio>
                          </el-radio-group>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 课程封面 -->
                  <el-row>
                    <el-col :span="12" id="course_pic">
                      <el-form-item label="课程封面" prop="coursePic">
                        <div v-if="type == 'detail' || type == 'audit'">
                          <el-image
                            :src="form.coursePic"
                            style="
                              width: auto !important;
                              height: 100px;
                              border-radius: 4px;
                              border: 1px dashed rgba(184, 196, 209, 1);
                            "
                            :preview-src-list="[form.coursePic]"
                          ></el-image>
                        </div>
                        <div class="uploadCourseCover" v-else>
                          <!-- 上传图片 -->
                          <div
                            v-if="!form.coursePic"
                            class="upload-head"
                            @click="editCropper()"
                          >
                            <div>
                              <img
                                src="@/assets/images/add.png"
                                class="add"
                                alt=""
                              />
                            </div>
                            <div>上传图片</div>
                          </div>
                          <div
                            v-else
                            class="upload-head"
                            @click="editCropper()"
                          >
                            <img :src="form.coursePic" class="cover" />
                          </div>
                        </div>
                        <div
                          style="
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                            font-weight: 400;
                            color: #a3a3a3;
                            line-height: 22px;
                          "
                        >
                          建议图片比例16:10,支持jpg、png等图片格式,图片小于5M
                        </div>
                        <vuecut
                          :type="2"
                          :uuid="form.dirName"
                          :courseTemporaryId="form.courseId"
                          :w="320"
                          :h="200"
                          :url="form.coursePic"
                          @coverResult="coverResult"
                          title="图片上传"
                          :open.sync="vuecutshow"
                        >
                        </vuecut>
                      </el-form-item>
                    </el-col>
                    <!-- 学习框架图 -->
                    <el-col :span="12">
                      <el-form-item label="学习框架图">
                        <div class="flex">
                          <!-- 上传图片 -->
                          <div
                            v-for="(item, index) in form.framePic"
                            :key="index"
                            class="rela framePic"
                          >
                            <el-image
                              v-bind:src="item"
                              style="
                                margin-right: 5px;
                                width: auto !important;
                                height: 100px;
                                border-radius: 4px;
                                border: 1px dashed rgba(184, 196, 209, 1);
                              "
                              :preview-src-list="
                                form.framePic ? form.framePic : []
                              "
                            >
                            </el-image>
                            <img
                              class="absolute shou close"
                              src="@/assets/images/close.png"
                              @click="delframePic(index)"
                              style="
                                width: 15px;
                                height: 15px;
                                top: -7px;
                                right: 0;
                              "
                              alt=""
                            />
                          </div>
                          <!-- 批量上传封面 -->
                          <uploadImages
                            @upload="uploadImgsFrame($event, 'framePic')"
                            v-if="
                              type !== 'detail' &&
                              type !== 'audit' &&
                              form.framePic.length < 10
                            "
                          ></uploadImages>
                        </div>
                        <div
                          style="
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                            font-weight: 400;
                            color: #a3a3a3;
                            line-height: 22px;
                          "
                        >
                          学习框架图最多上传10张
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- 主讲教师 -->
                    <el-col :span="12">
                      <el-form-item label="主讲教师" prop="principalId">
                        <template slot="label">
                          <span
                            >主讲教师
                            <el-tooltip
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content">有本课程编辑权限的老师</div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div v-if="type == 'detail' || type == 'audit'">
                          <div
                            v-if="form.principalId == item.teacherId"
                            v-for="(item, index) in commonTeacher"
                            :key="index"
                          >
                            {{ item.name }}
                          </div>
                        </div>
                        <el-select
                          class="w_374"
                          filterable
                          v-else
                          @change="fammterTeacher(form.principalId)"
                          v-model="form.principalId"
                          placeholder="请选择"
                          clearable
                        >
                          <el-option
                            v-for="item in teachers"
                            :key="item.teacherId"
                            :label="item.name + '--' + item.teacherNum"
                            :value="item.teacherId"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!-- 辅助教师 -->
                    <el-col :span="12">
                      <el-form-item label="辅助教师" prop="teacherIds">
                        <template slot="label">
                          <span
                            >辅助教师
                            <el-tooltip
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content">
                                可参与批改学生上传内容,无编辑课程权限的老师
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          class="flex"
                        >
                          <div
                            v-for="(item, index) in commonTeacher"
                            :key="index"
                          >
                            <div
                              style="margin-right: 10px"
                              v-if="item1 == item.teacherId"
                              v-for="(item1, index1) in form.teacherIds"
                              :key="index1"
                            >
                              {{ item.name }}
                            </div>
                          </div>
                        </div>
                        <div v-else class="flex">
                          <el-select
                            multiple
                            class="w_289"
                            filterable
                            v-model="form.teacherIds"
                            placeholder="请选择"
                            clearable
                          >
                            <el-option
                              v-for="item in commonTeacher"
                              :key="item.teacherId"
                              :label="item.name + '--' + item.teacherNum"
                              :value="item.teacherId"
                            />
                          </el-select>
                          <el-button
                            size="mini"
                            v-preventReClick
                            type="primary"
                            @click="form.teacherIds = []"
                            style="margin-left: 5px"
                            >清空所有
                          </el-button>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="disciplineGroupOpen">
                    <!-- 学科专业组 -->
                    <el-col :span="12">
                      <el-form-item label="学科专业组" prop="disciplineGroupId">
                        <template slot="label">
                          <span>学科专业组</span>
                        </template>
                        <div v-if="type == 'detail' || type == 'audit'">
                          <div
                            v-if="
                              form.disciplineGroupId == item.disciplineGroupId
                            "
                            v-for="(item, index) in disciplineGroupList"
                            :key="index"
                          >
                            {{ item.disciplineGroupName }}
                          </div>
                        </div>
                        <el-select
                          class="w_374"
                          filterable
                          v-else
                          v-model="form.disciplineGroupId"
                          placeholder="请选择"
                          clearable
                        >
                          <el-option
                            v-for="item in disciplineGroupList"
                            :key="item.disciplineGroupId"
                            :label="item.disciplineGroupName"
                            :value="item.disciplineGroupId"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- 基准学时 -->
                    <el-col :span="12" id="study_time">
                      <el-form-item label="基准学时" prop="studyTime">
                        <div v-if="type == 'detail' || type == 'audit'">
                          {{ form.studyTime }}
                        </div>
                        <el-input-number
                          placeholder="请选择"
                          v-else
                          :min="0"
                          controls-position="right"
                          v-model="form.studyTime"
                        ></el-input-number>
                        时
                      </el-form-item>
                    </el-col>
                    <!-- 关联工作站 -->
                    <el-col :span="12">
                      <el-form-item label="关联工作站" prop="workstationIds">
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          class="flex"
                        >
                          <div
                            v-for="(item, index) in workstations"
                            :key="index"
                          >
                            <div
                              style="margin-right: 10px"
                              v-if="form.workstationIds == item.workstationId"
                            >
                              {{ item.workstationName }}
                            </div>
                          </div>
                        </div>
                        <div class="flex" v-else>
                          <el-select
                            style="width: 374px"
                            filterable
                            collapse-tags
                            v-model="form.workstationIds"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in workstations"
                              :key="item.workstationId"
                              :label="item.workstationName"
                              :value="item.workstationId"
                            />
                          </el-select>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="课程目标" prop="teachingObjectives">
                        <template slot="label">
                          <span
                            >课程目标
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                课堂学习目标依据教学进度计划确定，并依据学生情况进行适当调整。学习目标整体撰写逻辑体现工作过程，表述结构按照综合职业能力目标的方式表达。学习目标撰写应以学生为主语，使用输出性的“动词+名词”方式编写，应可观察、可考核、可测量。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.teachingObjectives"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.teachingObjectives"
                          type="textarea"
                          placeholder="请输入课程目标"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="课程描述" prop="describe">
                        <template slot="label">
                          <span
                            >课程描述
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                工学一体课程的优秀学习内容需充分吸纳借鉴世赛或国赛元素，清晰说明借鉴世赛或国赛评价的标准、方式及理由，并在课程考核方案中呈现。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.describe"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.describe"
                          type="textarea"
                          placeholder="请输入课程描述"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="学习内容" prop="content">
                        <template slot="label">
                          <span
                            >学习内容
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                工学一体化教师依据教学进度计划确定课堂学习内容，同时可以参考学习任务分析中识别的实践知识、理论知识和职业素养等。设置内容时，教师还需要考虑结合学生情况分析，对已学内容和掌握情况进行分析。对于学生掌握情况不佳的内容，教师可以考虑将相关内容补充进课堂中，通过反复练习、反思复习等手段进行巩固和提升。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.content"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.content"
                          type="textarea"
                          placeholder="请输入学习内容"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="教学组织方式" prop="teachingMethod">
                        <template slot="label">
                          <span
                            >教学组织方式
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                教学组织策略的选择应注重独立学习、小组活动、全班活动等多种组织方式的科学组合，组织方式得到有效，突出学生的主体地位。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.teachingMethod"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.teachingMethod"
                          type="textarea"
                          placeholder="请输入教学组织方式"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="工具/材料/设备" prop="studyTools">
                        <template slot="label">
                          <span
                            >工具/材料/设备
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                建议填写工作中需要使用到的工具、材料、设备等信息。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.studyTools"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.studyTools"
                          type="textarea"
                          placeholder="请输入工具/材料/设备"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="学习资料" prop="studyData">
                        <template slot="label">
                          <span
                            >学习资料
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                1.课程学习资源还包含除工作页及配套信息页外的其他三种资源，且工作页质量高。<br />
                                2.课程学习资源能支撑本课程所有学习任务，各资源内容及形式与学习任务学习内容匹配度高。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.studyData"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.studyData"
                          type="textarea"
                          placeholder="请输入学习资料"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="教学场地描述" prop="teachingPlace">
                        <template slot="label">
                          <span
                            >教学场地描述
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                工学一体课程的工作站尽可能与典型任务环境相一致
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.teachingPlace"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.teachingPlace"
                          type="textarea"
                          placeholder="请输入教学场地描述"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="教学考核要求" prop="teachingPlace">
                        <template slot="label">
                          <span
                            >教学考核要求
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                1.
                                课程考核设计与课程目标匹配关系清晰，考核要点、考核任务、评分标准、权重与课程目标相适应。
                                <br />
                                2.
                                在专业能力、通用能力、职业素养和思政素养任意一方面关注学生能力的增值。
                                <br />
                                3.
                                清晰说明借鉴世赛或国赛评价的标准、方式及理由，并在课程考核方案中呈现。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.teachingAssessment"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="2000"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.teachingAssessment"
                          type="textarea"
                          placeholder="请输入教学考核要求"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- 教学场地 -->
                    <el-col :span="12">
                      <el-form-item label="教学场地" prop="teachingPlacePic">
                        <template slot="label">
                          <span
                            >教学场地
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                工学一体课程的工作站尽可能与典型任务环境相一致(尽量提供工作站多角度照片以便完整展示)
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div class="flex">
                          <!-- 批量上传封面 -->
                          <uploadImages
                            style="margin-right: 5px"
                            @upload="
                              uploadImgsFrame($event, 'teachingPlacePic')
                            "
                            v-if="
                              type !== 'detail' &&
                              type !== 'audit' &&
                              form.teachingPlacePic.length < 5
                            "
                          ></uploadImages>
                          <!-- 上传图片 -->
                          <div
                            v-for="(item, index) in form.teachingPlacePic"
                            :key="index"
                            class="rela framePic"
                          >
                            <el-image
                              v-bind:src="item"
                              style="
                                margin-right: 5px;
                                width: auto !important;
                                height: 100px;
                                border-radius: 4px;
                                border: 1px dashed rgba(184, 196, 209, 1);
                              "
                              :preview-src-list="
                                form.teachingPlacePic
                                  ? form.teachingPlacePic
                                  : []
                              "
                            >
                            </el-image>
                            <img
                              class="absolute shou close"
                              src="@/assets/images/close.png"
                              @click="delteachingPlacePic(index)"
                              style="
                                width: 15px;
                                height: 15px;
                                top: -7px;
                                right: 0;
                              "
                              alt=""
                            />
                          </div>
                        </div>
                        <div
                          style="
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                            font-weight: 400;
                            color: #a3a3a3;
                            line-height: 22px;
                          "
                        >
                          教学场地图片图最多上传5张
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="师资团队" prop="teacherResource">
                        <template slot="label">
                          <span
                            >师资团队
                            <el-tooltip
                              v-if="courseTemplate == 1"
                              class="item"
                              effect="dark"
                              placement="top"
                            >
                              <i
                                class="el-icon-question"
                                style="font-size: 16px; cursor: pointer"
                              ></i>
                              <div slot="content" style="width: 300px">
                                1.
                                企业人员在课程开发中任务分工明确，发挥作用明显。<br />
                                2.
                                课程专任教师团队全体成员均为工学一体化教师，至少1名参加过省级以上工学一体化教师培训，成绩合格。<br />
                                3.
                                本课程专任教师团体全体成员均承担本专业工学一体化课程授课任务。<br />
                                4.
                                课程专任教师团队全体成员在本课程建设过程中分工明确、成果具体，且在课程实施过程中工作内容具体，发挥作用显著。
                              </div>
                            </el-tooltip>
                          </span>
                        </template>
                        <div
                          v-if="type == 'detail' || type == 'audit'"
                          style="white-space: pre-wrap"
                          v-html="form.teacherResource"
                        ></div>
                        <el-input
                          v-else
                          style="width: 374px"
                          maxlength="1500"
                          show-word-limit
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          v-model="form.teacherResource"
                          type="textarea"
                          placeholder="请输入师资"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <!-- 更多文档 -->
                    <el-col :span="12">
                      <el-form-item label="更多文档" prop="moreDoc">
                        <div class="flex">
                          <!-- 上传文件 -->
                          <uploadFile
                    :multiple="true"
                            :downloadAbled="
                              $store.getters.teacherId + '' ==
                              form.principalId + ''
                            "
                            :uploadType="3"
                            :maxFileSize="200"
                            :maxNum="999"
                            :ossType="2"
                            :uuid="form.dirName"
                            accept=".pdf,.docx,.doc,.pptx"
                            @uploadFiles="uploadFiles"
                            :echoFile="
                              form.moreDoc ? JSON.parse(form.moreDoc) : []
                            "
                            v-if="type !== 'detail' && type !== 'audit'"
                          >
                          </uploadFile>
                        </div>
                        <div
                          style="
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                            font-weight: 400;
                            color: #a3a3a3;
                            line-height: 22px;
                          "
                        >
                          支持PDF、WORD、PPT等格式，单个文档小于200MB
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-row>
              </el-form>
            </div>
            <div class="detailbottom flexBet" style="bottom: 40px; right: 40px">
              <div style="color: rgba(255, 156, 34, 1)">
                *请尽量完善课程信息
              </div>
              <div class="flex">
                <el-button v-preventReClick @click="cancel">取 消</el-button>
                <el-button
                  v-preventReClick
                  type="primary"
                  v-if="type == 'add' || type == 'edit'"
                  @click="handleAddCourse('tipsNeeded&next')"
                  >保存,下一步
                </el-button>
              </div>
            </div>
          </div>
          <courseInfo
            v-else
            :showRoot="showRoot"
            :status="$route.query.status"
            :form="form"
          ></courseInfo>
        </el-tab-pane>
        <!-- 课程信息 -->
        <el-tab-pane label="课程内容" name="1">
          <div class="flex">
            <!-- 树列表 -->
            <div class="taskListBox">
              <div class="taskListBox_title flexBet">
                <div class="courseName overTxt shou">
                  <tooltip
                    position="bottom-start"
                    :text="form.courseName"
                    width="100%"
                  />
                </div>
                <div
                  @click="handlechange('course')"
                  class="allExpand flex shou"
                >
                  <img
                    v-if="!isClose_course"
                    src="@/assets/images/courseAdd/expand.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/images/courseAdd/shrink.png"
                    alt=""
                  />
                  {{ !isClose_course ? "全部展开" : "全部收起" }}
                </div>
              </div>
              <div class="taskListBox_btns flexBet">
                <div
                  v-if="
                    ($route.query.type == 'add' ||
                      $route.query.type == 'edit') &&
                    showRoot
                  "
                  @click="showTopicBank"
                  class="btn_item"
                >
                  <div class="exam_img"></div>
                  考核题库
                </div>
                <div
                  @click="handleScoreBox"
                  ref="studentScore"
                  class="btn_item"
                >
                  <div class="score_img"></div>
                  课程配分
                </div>
                <div
                  v-if="
                    $route.query.type == 'add' || $route.query.type == 'edit'
                  "
                  @click="handleAddTask"
                  class="btn_item"
                >
                  <div class="task_img"></div>
                  添加任务
                </div>
                <div
                  v-if="
                    ($route.query.type == 'add' ||
                      $route.query.type == 'edit') &&
                    form.courseType == 3
                  "
                  @click="handleAddInformation"
                  class="btn_item"
                >
                  <div class="ai_img"></div>
                  AI导入课程
                </div>
              </div>
              <div
                class="taskListBox_tip flex"
                v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
              >
                <div>注：任务和步骤均可通过拖拽来调整排序</div>
              </div>
              <div
                :class="{ detail_height: type == 'detail' || type == 'audit' }"
                style="
                  width: 100%;
                  height: calc(100vh - 352px);
                  overflow: auto;
                  border-radius: 0 0 0 16px;
                "
              >
                <courseTrees
                  ref="course_trees_ref"
                  :type="type"
                  :selectId="selectedId"
                  :data="courseIndexTree"
                  @addLink="handleAddLink"
                  @addFinish="handleAddFinish"
                  @delete="deleteCourseIndex"
                  @sort="sortCourseIndex"
                  @handleClick="handleClick"
                  @rename="reCourseIndexName"
                  @addContent="handleAddContent"
                >
                </courseTrees>
              </div>
            </div>
            <!-- 章节信息 -->
            <div class="taskInfoBox">
              <div class="topLine">
                <tooltip :text="dynamicTitle" width="800"></tooltip>
              </div>
              <!-- 任务 -->
              <div class="box">
                <addTaskForm
                  :tabIndex="active"
                  v-if="selectedType == 1 || selectedType == 2"
                  :selectedTaskId="selectedId"
                  :deleteId="deleteId"
                  :type="type"
                  :courseForm="form"
                  :selectedType="selectedType"
                ></addTaskForm>
                <addContentForm
                  ref="ContentFormRef"
                  :showRoot="showRoot"
                  :errorIdArr="errorIdArr"
                  :tabIndex="active"
                  v-else-if="selectedType == 3 || selectedType == 4"
                  @addExam="addExamByContentForm"
                  @updateSubmitType="updateSubmitType"
                  @updateLearnStatus="updateLearnStatus"
                  :topicCategoryId="topicCategoryId"
                  :selectedContentId="selectedId"
                  :reName="dynamicTitle"
                  :deleteId="deleteId"
                  :mustLearnStatus="mustLearnStatus"
                  :type="type"
                  :courseForm="form"
                  :isopenResourcce="isopenResourcce"
                >
                </addContentForm>
                <el-empty
                  v-else
                  style="margin-top: 80px"
                  description="暂无信息~"
                ></el-empty>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 工学一体文件 -->
        <el-tab-pane
          label="课程资料"
          name="2"
          v-if="form.courseType == 3 && showRoot"
        >
          <div class="baseInfo">
            <el-form style="margin-top: 20px" :model="form" label-width="130px">
              <el-row>
                <!-- 说课视频 -->
                <el-col :span="12">
                  <div class="label_text">说课视频</div>
                  <div class="flex more_files">
                    <!-- 上传视频 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="type == 'edit' || type == 'add' ? 'upload' : type"
                      :uploadType="2"
                      :maxVideoSize="300"
                      :uuid="form.dirName"
                      :maxNum="2"
                      :ossType="2"
                      :isShowName="true"
                      accept=".mp4,.webm"
                      @uploadFiles="uploadVideo"
                      :echoFile="
                        form.courseVideo ? JSON.parse(form.courseVideo) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    v-if="type == 'add' || type == 'edit'"
                    style="
                      padding-left: 130px;
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                  >
                    最多2个视频，支持MP4格式，小于300MB
                  </div>
                </el-col>
                <!-- 课堂实录 -->
                <el-col :span="12">
                  <div class="label_text">课堂实录</div>
                  <div class="flex more_files">
                    <!-- 上传视频 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="type == 'edit' || type == 'add' ? 'upload' : type"
                      :uploadType="2"
                      :maxVideoSize="300"
                      :uuid="form.dirName"
                      :maxNum="15"
                      :ossType="2"
                      :isShowName="true"
                      accept=".mp4,.webm"
                      @uploadFiles="upload_transcriptOfTheClass"
                      :echoFile="
                        form.classRecord ? JSON.parse(form.classRecord) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    v-if="type == 'add' || type == 'edit'"
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                  >
                    最多15个视频，支持MP4格式，小于300MB
                  </div>
                </el-col>
              </el-row>
              <div
                style="
                  border-bottom: 1px dashed #eeeeee;
                  margin: 20px 20px 10px 20px;
                "
              ></div>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    1.《人才培养方案》
                    <el-link
                      @click="downLoadFile('1.“人才培养方案”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'talentTrainingProgram')
                      "
                      :echoFile="
                        form.talentTrainingProgram
                          ? JSON.parse(form.talentTrainingProgram)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    2.《工学一体化课程校本转化建议》
                    <el-link
                      @click="
                        downLoadFile(
                          '2.“工学一体化课程校本转化建议”参考性体例格式'
                        )
                      "
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'courseStandardAdvice')
                      "
                      :echoFile="
                        form.courseStandardAdvice
                          ? JSON.parse(form.courseStandardAdvice)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    3.《课程标准(校本转化)/学习任务设计》
                    <el-link
                      @click="
                        downLoadFile('3.“课程标准（校本转化）”参考性体例格式')
                      "
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'taskDesign')"
                      :echoFile="
                        form.taskDesign ? JSON.parse(form.taskDesign) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    4.《课程考核方案》
                    <el-link
                      @click="downLoadFile('4.“课程考核方案”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'assessmentPlan')"
                      :echoFile="
                        form.assessmentPlan
                          ? JSON.parse(form.assessmentPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    5.《学习任务分析》
                    <el-link
                      @click="downLoadFile('5.“学习任务分析”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'taskAnalysis')"
                      :echoFile="
                        form.taskAnalysis ? JSON.parse(form.taskAnalysis) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    6.《学习任务教学活动策划》
                    <el-link
                      @click="
                        downLoadFile('6.“学习任务教学活动策划”参考性体例格式')
                      "
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'activityPlanningTable')
                      "
                      :echoFile="
                        form.activityPlanningTable
                          ? JSON.parse(form.activityPlanningTable)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    7.《学习任务考核方案》
                    <el-link
                      @click="
                        downLoadFile('7.“学习任务考核方案”参考性体例格式')
                      "
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'taskAssessmentPlan')
                      "
                      :echoFile="
                        form.taskAssessmentPlan
                          ? JSON.parse(form.taskAssessmentPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    8.《学习任务工作页》
                    <el-link
                      @click="downLoadFile('8.“学习任务工作页”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'workPage')"
                      :echoFile="form.workPage ? JSON.parse(form.workPage) : []"
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    9.《学习任务信息页》
                    <el-link
                      @click="downLoadFile('9.“学习任务信息页”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'informationPage')"
                      :echoFile="
                        form.informationPage
                          ? JSON.parse(form.informationPage)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    10.《教学进度计划》
                    <el-link
                      @click="downLoadFile('10.“教学进度计划”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'teachingProgressPlan')
                      "
                      :echoFile="
                        form.teachingProgressPlan
                          ? JSON.parse(form.teachingProgressPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    11.《教学活动方案》
                    <el-link
                      @click="downLoadFile('11.“教学活动方案”参考性体例格式')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'teachingActivityPlan')
                      "
                      :echoFile="
                        form.teachingActivityPlan
                          ? JSON.parse(form.teachingActivityPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    12.《工学一体化课程终结性考核试题》
                    <el-link
                      @click="downLoadFile('12.工学一体化课程终结性考核试题')"
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'finalAssessmentTopic')
                      "
                      :echoFile="
                        form.finalAssessmentTopic
                          ? JSON.parse(form.finalAssessmentTopic)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    13.《课程专家开发花名册/课程教师团队花名册》
                    <el-link
                      @click="
                        downLoadFile('13.课程专家开发花名册课程教师团队花名册')
                      "
                      type="primary"
                      v-if="type == 'add' || type == 'edit'"
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'expertDevelopRoster')
                      "
                      :echoFile="
                        form.expertDevelopRoster
                          ? JSON.parse(form.expertDevelopRoster)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">14. 更多文档</div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="10"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'moreMaterialsDoc')"
                      :echoFile="
                        form.moreMaterialsDoc
                          ? JSON.parse(form.moreMaterialsDoc)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="detailbottom flexBet" style="bottom: 40px; right: 40px">
            <div style="color: rgba(255, 156, 34, 1)">
              {{ type == "add" || type == "edit" ? "*请尽量完善课程信息" : "" }}
            </div>
            <div class="flex">
              <el-button
                v-preventReClick
                v-if="type == 'add' || type == 'edit'"
                @click="cancel"
                >取 消
              </el-button>
              <el-button
                v-preventReClick
                v-if="type == 'detail'"
                type="primary"
                @click="cancel"
                >退 出
              </el-button>
              <el-button
                v-preventReClick
                type="primary"
                v-if="type == 'add' || type == 'edit'"
                @click="handleAddCourse('tipsNeeded')"
                >保存
              </el-button>
            </div>
          </div>
        </el-tab-pane>
        <!-- 通用课程资料 -->
        <el-tab-pane
          label="课程资料"
          name="2"
          v-if="form.courseType != 3 && showRoot"
        >
          <div class="baseInfo">
            <el-form style="margin-top: 20px" :model="form" label-width="130px">
              <el-row>
                <!-- 说课视频 -->
                <el-col :span="12">
                  <div class="label_text">说课视频</div>
                  <div class="flex more_files">
                    <!-- 上传视频 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="type == 'edit' || type == 'add' ? 'upload' : type"
                      :uploadType="2"
                      :maxVideoSize="300"
                      :uuid="form.dirName"
                      :maxNum="2"
                      :ossType="2"
                      :isShowName="true"
                      accept=".mp4,.webm"
                      @uploadFiles="uploadVideo"
                      :echoFile="
                        form.courseVideo ? JSON.parse(form.courseVideo) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    v-if="type == 'add' || type == 'edit'"
                    style="
                      padding-left: 130px;
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                  >
                    最多2个视频，支持MP4格式，小于300MB
                  </div>
                </el-col>
                <!-- 课堂实录 -->
                <el-col :span="12">
                  <div class="label_text">课堂实录</div>
                  <div class="flex more_files">
                    <!-- 上传视频 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="type == 'edit' || type == 'add' ? 'upload' : type"
                      :uploadType="2"
                      :maxVideoSize="300"
                      :uuid="form.dirName"
                      :maxNum="15"
                      :ossType="2"
                      :isShowName="true"
                      accept=".mp4,.webm"
                      @uploadFiles="upload_transcriptOfTheClass"
                      :echoFile="
                        form.classRecord ? JSON.parse(form.classRecord) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    v-if="type == 'add' || type == 'edit'"
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                  >
                    最多15个视频，支持MP4格式，小于300MB
                  </div>
                </el-col>
              </el-row>
              <div
                style="
                  border-bottom: 1px dashed #eeeeee;
                  margin: 20px 20px 10px 20px;
                "
              ></div>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    1.《课程标准》
                    <el-link
                      @click="downLoadFile('1.《课程标准》')"
                      type="primary"
                      v-if="
                        (type == 'add' || type == 'edit') &&
                        rootNames.includes(hostname)
                      "
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'taskDesign')"
                      :echoFile="
                        form.taskDesign ? JSON.parse(form.taskDesign) : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">2.《考核方案》</div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'assessmentPlan')"
                      :echoFile="
                        form.assessmentPlan
                          ? JSON.parse(form.assessmentPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">
                    3.《教学计划》
                    <el-link
                      @click="downLoadFile('3.《教学计划》')"
                      type="primary"
                      v-if="
                        (type == 'add' || type == 'edit') &&
                        rootNames.includes(hostname)
                      "
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'teachingProgressPlan')
                      "
                      :echoFile="
                        form.teachingProgressPlan
                          ? JSON.parse(form.teachingProgressPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="label_text">
                    4.《教案》
                    <el-link
                      @click="downLoadFile('4.《教案》')"
                      type="primary"
                      v-if="
                        (type == 'add' || type == 'edit') &&
                        rootNames.includes(hostname)
                      "
                      >下载模板
                    </el-link>
                  </div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="5"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="
                        uploadWorkFiles($event, 'teachingActivityPlan')
                      "
                      :echoFile="
                        form.teachingActivityPlan
                          ? JSON.parse(form.teachingActivityPlan)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="label_text">5. 更多文档</div>
                  <div class="flex more_files">
                    <!-- 上传文件 -->
                    <uploadFile
                    :multiple="true"
                      :downloadAbled="
                        $store.getters.teacherId + '' == form.principalId + ''
                      "
                      :type="
                        type == 'add' || type == 'edit' ? 'upload' : 'view'
                      "
                      :uploadType="3"
                      :maxFileSize="200"
                      :maxNum="10"
                      :ossType="2"
                      :uuid="form.dirName"
                      accept=".pdf,.docx,.doc,.xls,.xlsx"
                      @uploadFiles="uploadWorkFiles($event, 'moreMaterialsDoc')"
                      :echoFile="
                        form.moreMaterialsDoc
                          ? JSON.parse(form.moreMaterialsDoc)
                          : []
                      "
                    >
                    </uploadFile>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                      font-weight: 400;
                      padding-left: 130px;
                      box-sizing: border-box;
                      color: #a3a3a3;
                      line-height: 22px;
                    "
                    v-if="type == 'add' || type == 'edit'"
                  >
                    支持PDF、WORD、EXCEL等格式，单个文档小于200MB
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="detailbottom flexBet" style="bottom: 40px; right: 40px">
            <div style="color: rgba(255, 156, 34, 1)">*请尽量完善课程信息</div>
            <div class="flex">
              <el-button v-preventReClick @click="cancel">取 消</el-button>
              <el-button
                v-preventReClick
                type="primary"
                v-if="type == 'add' || type == 'edit'"
                @click="handleAddCourse('tipsNeeded')"
                >保存
              </el-button>
            </div>
          </div>
        </el-tab-pane>
        <!-- 课程数据 -->
        <el-tab-pane
          label="课程数据"
          name="3"
          v-if="type == 'detail' || type == 'audit'"
        >
          <courseData :tabindex="active"></courseData>
        </el-tab-pane>
        <!-- 学生优秀成果 -->
        <el-tab-pane
          label="学生优秀成果"
          name="4"
          v-if="type == 'detail' || type == 'audit'"
        >
          <div class="flex">
            <!-- 树列表 -->
            <div class="taskListBox">
              <div class="taskListBox_title flexBet">
                <div class="courseName overTxt shou">
                  <tooltip
                    position="bottom-start"
                    :text="form.courseName"
                    width="100%"
                  />
                </div>
                <el-popover placement="bottom" width="200" trigger="click">
                  <div class="permissionSettings">
                    <div
                      class="permissionSettings-title"
                      style="font-size: 14px; font-weight: 600"
                    >
                      设置学生可见权限
                    </div>
                    <el-radio-group
                      v-removeAriaHidden
                      @input="learningResultStateInput"
                      v-model="form.learningResultState"
                      style="margin-top: 8px"
                    >
                      <div style="margin-top: 3px">
                        <el-radio :label="0">全部可见</el-radio>
                      </div>
                      <div style="margin-top: 3px">
                        <el-radio :label="1">仅学习通过后的学生可见</el-radio>
                      </div>
                      <div style="margin-top: 3px">
                        <el-radio :label="2">全部不可见</el-radio>
                      </div>
                    </el-radio-group>
                  </div>
                  <div slot="reference" class="allExpand flex shou">
                    <img src="@/assets/images/studyResults/set.png" alt="" />
                    权限
                  </div>
                </el-popover>

                <div
                  @click="handlechange('addStudyResults')"
                  class="allExpand flex shou"
                >
                  <img
                    v-if="!isClose_addStudyResults"
                    src="@/assets/images/courseAdd/expand.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="@/assets/images/courseAdd/shrink.png"
                    alt=""
                  />
                  {{ !isClose_addStudyResults ? "全部展开" : "全部收起" }}
                </div>
              </div>

              <div
                :class="{ detail_height: type == 'detail' || type == 'audit' }"
                style="
                  width: 100%;
                  height: calc(100vh - 314px + 48px + 29px);
                  overflow: auto;
                  border-radius: 0 0 0 16px;
                "
              >
                <courseTrees
                  ref="addStudyResults_trees_ref"
                  :type="type"
                  :data="resultIndexTree"
                  @handleClick="handleClick_studyResults"
                >
                </courseTrees>
              </div>
            </div>
            <!-- 章节信息 -->
            <div class="taskInfoBox">
              <div class="topLine">
                <tooltip
                  :text="dynamicTitle_studyResults"
                  width="800"
                ></tooltip>
              </div>
              <!-- 任务 -->
              <div>
                <!--selectedType 1 任务 2 目录 3 内容 4 终结性考核 selectedId-->
                <addStudyResults
                  :preview="preview"
                  :tabIndex="active"
                  :selectedTaskId="selectedId_studyResults"
                  type="edit"
                  :courseForm="form"
                  :selectedType="selectedType_studyResults"
                ></addStudyResults>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 添加任务 -->
      <taskAddDia
        :courseId="form.courseId"
        :indexId="form.indexId"
        :isElTemplate="courseTemplate"
        :sort="addTaskSort"
        :open.sync="addTaskOpen"
        @refresh="addTaskReturn"
      ></taskAddDia>
      <!-- 添加目录 -->
      <linkAddDia
        :open.sync="addLinkOpen"
        @refresh="addLinkReturn"
        :courseId="form.courseId"
        :parentId="indexParentId"
        :sort="addLinkSort"
        :isElTemplate="courseTemplate"
      ></linkAddDia>
      <addContentDia
        :open.sync="addContentOpen"
        @refresh="addContentReturn"
        :courseId="form.courseId"
        :addType="addContentType"
        :parentId="indexParentId"
        :sort="addContentSort"
        :isElTemplate="courseTemplate"
      >
      </addContentDia>
      <!-- 任务分类 -->
      <taskClassificate
        :courseId="form.courseId"
        :treeData="courseIndexTree"
        :type="type"
        :open.sync="taskClassificateOpen"
        @refresh="taskClassificateReturn"
      ></taskClassificate>
      <scoreDialog
        :courseId="form.courseId"
        :courseType="form.courseType"
        :open.sync="score_open"
        :type="score_type"
      ></scoreDialog>
      <!-- 驳回 -->
      <reject
        :open.sync="rejectOpen"
        :type="1"
        @refresh="reasonDiaReturn"
      ></reject>
      <onboardingGuide
        @step4Click="handleScoreBox"
        :step="onboardingGuideStep"
        :show="onboardingGuideShow"
        :rect="onboardingGuideRect"
        :radius="onboardingGuideRadius"
      ></onboardingGuide>
    </div>
    <ImportInformation
      ref="importInformation"
      :courseId="form.courseId"
    ></ImportInformation>
  </backContainer>
</template>

<script>
import { fammterString, uploadOSS } from '@/api/upload'
import { listPost_teacher } from '@/api/schoolOrganization/teacher'
import {
  addCourse,
  deleteCourseIndex,
  editCourse,
  editCourseIndex,
  editCourseLearningResultstate,
  getCourseDetial,
  getCourseIndexTree,
  getExceptionExam,
  getMajorNameList,
  initTemplate,
  sortCourseIndex
} from '@/api/course/course'
import { listPost_workstation } from '@/api/workstation/workstation'
import uploadImages from '@/components/uploadImages'
import uploadFile from '@/components/uploadFile/uploadFile'
import reject from '@/components/reject'
import courseTrees from './components/courseTrees'
import addContentForm from './components/addContentForm'
import addTaskForm from './components/addTaskForm'
import addStudyResults from '@/components/addStudyResults'
import courseData from './components/courseData'
import taskAddDia from './components/taskAddDia'
import linkAddDia from './components/linkAddDia'
import addContentDia from './components/addContentDia'
import taskClassificate from './components/taskClassificate'
import courseInfo from './components/courseInfo'
import scoreDialog from './components/scoreDialog'
import { disciplineGroup_onOffStatus, disciplineList } from '@/api/disciplineGroup/disciplineGroup'
import {
  addToChildren,
  changeItemById,
  changeItemKeysById,
  filterIdsByType,
  formatTreeData,
  findItemById,
  getSiblingItem,
  processTree,
  removeItemById
} from './formatTreeData'
import { v4 as uuidv4 } from 'uuid'
import { isEnableNetdisk } from '@/api/library_index'
import onboardingGuide from '@/components/onboardingGuide'
import ImportInformation from '@/views/tea_course/components/importInformation.vue'

export default {
  components: {
    onboardingGuide,
    courseData,
    addStudyResults,
    uploadFile,
    uploadImages,
    courseTrees,
    courseInfo,
    addContentForm,
    addTaskForm,
    taskAddDia,
    linkAddDia,
    addContentDia,
    taskClassificate,
    scoreDialog,
    reject,
    ImportInformation,
  },
  props: {},
  dicts: ["course_type", "major_category"],
  data() {
    return {
      //题库抽屉状态
      showTopicBankDrawer: false,

      onboardingGuideRadius: 50,
      onboardingGuideStep: 4,
      onboardingGuideShow: false,
      onboardingGuideRect: {
        top: 0,
        left: 0,
      },
      hostname: "",
      rootNames: ["zjhwtc.metaxun.com", "testv2.metaxun.com"],
      showRoot: true,
      abnormalState: false,
      //用于成果的文件预览显示lable
      preview: {
        coursePath: "",
        courseName: "",
        studentId: "",
        studentName: "",
      },
      dynamicTitle_studyResults: "",
      selectedId_studyResults: "",
      selectedType_studyResults: "",
      //
      question_id: "",
      vuedraggable_disabled: false,
      uuid: "",
      topicCategoryId: "",
      dynamicTitle: "详情",
      loading: false,
      // 树列表
      // 拖拽
      sortChapterItem: "",
      sortType: "",
      ccCourseChapterTemporaryList: [],
      rejectOpen: false,
      type: this.$route.query.type,
      // 添加子目录组件
      addLinkOpen: false,
      addLinkSort: null,
      //子目录父级id
      indexParentId: "",
      // 添加子目录组件
      addContentOpen: false,
      addContentType: "",
      addContentSort: null,

      addLinkCurChapterId: "",
      addLinkCurChapterIndex: "",
      // 任务分类组件
      taskClassificateOpen: false,
      curAddTaskSort: "",
      question_open: false,
      //分值配置
      score_open: false,
      score_type: "edit",
      showExpot: false,
      addTaskOpen: false,
      addTaskSort: null,
      /* 全部展开 */
      isClose_course: true,
      isClose_abnormal: true,
      isClose_addStudyResults: true,
      active: "0",
      changed: false,
      changedIndex: null,
      selectedId: "",
      deleteId: null,
      selectedType: "",
      mustLearnStatus: "",
      selectedTaskId: "",
      selectedTaskIndex: "",
      selectedChapterId: "",
      selectedChapterIndex: "",
      vuecutshow: false,
      // 表单参数
      form: {
        learningResultState: 1,
        courseId: undefined,
        courseName: undefined,
        coursePic: undefined,
        classRecord: undefined,
        framePic: [],
        preCourseId: undefined,
        majorNameId: undefined,
        jumpStatus: 0,
        passAllStatus: 0,
        principalId: undefined,
        remark: undefined,
        status: undefined,
        teacherIds: [],
        workstationIds: undefined,
        schoolId: undefined,
        teachingObjectives: undefined,
        describe: undefined,
        content: undefined,
        studyTime: undefined,
        teachingMethod: undefined,
        studyTools: undefined,
        studyData: undefined,
        teachingPlacePic: [],
        disciplineGroupId: undefined,
        teachingPlace: undefined,
      },
      disciplineGroupOpen: false,
      disciplineGroupList: [],
      // 表单校验
      rules: {
        disciplineGroupId: [
          { required: true, message: "学科专业组不能为空", trigger: "blur" },
        ],
        courseName: [
          { required: true, message: "课程名称不能为空", trigger: "blur" },
        ],
        studyTime: [
          { required: true, message: "基准学时不能为空", trigger: "change" },
        ],
        courseType: [
          { required: true, message: "请选择课程类型", trigger: "change" },
        ],
        majorType: [
          { required: true, message: "请选择专业大类", trigger: "blur" },
        ],
        majorNameId: [
          { required: true, message: "请选择专业名称", trigger: "change" },
        ],
        coursePic: [
          { required: true, message: "课程封面不能为空", trigger: "blur" },
        ],
        principalId: [
          { required: true, message: "主讲教师不能为空", trigger: "change" },
        ],
      },
      // 任务表单
      //   教师列表
      teachers: [],
      workstations: [],
      commonTeacher: [],
      // 章节index
      chapterIndex: "",
      // 任务添加的时候用于判断删除 自增indexid
      tid: 0,
      majorNameList: [],
      //课程目录树结构
      courseIndexTree: [],
      //学习成果树结构
      resultIndexTree: [],
      courseTemplate: null,
      // 初始化加载该页面
      initLoading: true,
      // 是否开启资源库
      isopenResourcce: false,
      // 异常考核树结构列表
      exceptionTreeList: [],
      errorIdArr: [],
      pollingInterval: null,
    };
  },
  watch: {
    form: {
      handler() {
        // 这里后续写该页面需要时刻注意该打印 确保只打印一次
        console.log("变化了!!!");
        // changedIndex用于获取 当表单变化（即课程变化 通用课程资料和工学一体文件变化时候）
        // 所处的active
        if (this.$route.query.type == "edit") {
          // 编辑获取当前课程是否导入
          // 当编辑的时候用于 获取是否初始化获取了课程信息
          // 在获取课程信息的函数里 将initLoading变成了false 来避免编辑第一次初始化问题
          if (!this.initLoading) {
            this.changedIndex = this.active;
            this.changed = true;
          } else {
            this.initLoading = false;
          }
        } else if (this.$route.query.type == "add") {
          this.changedIndex = this.active;
          this.changed = true;
        } else {
        }
      },
      deep: true,
    },
    active: {
      handler(newValue) {
        if (newValue == "1") {
          if (this.form.courseId) {
            this.getisOpenResource();
            //获取课程下有哪些目录存在异常考核
            this.getExceptionExam();
            if (this.courseIndexTree.length == 0) {
              this.$nextTick(() => {
                //获取课程目录树结构
                this.getCourseIndexTree();
              });
            }
          }
        }
        if (newValue == "4") {
          if (this.resultIndexTree.length == 0 && this.form.courseId) {
            //获取课程目录树结构
            this.getCourseIndexTree();
          }
        }
      },
    },
    "form.majorType": {
      handler() {
        if (this.type == "add" || this.type == "edit") {
          this.getMajorNameList();
        }
      },
    },
    allLoading: {
      handler(newValue) {
        if(!newValue){
          this.getCourseIndexTree()
        }
      },
    },
  },
  created() {
    //学校管理员可以看全部，分院只能看本院，教师没钱权限
    let str = this.$store.getters.roleId;
    if (this.$route.query.from == "recommend") {
      if (str == "schoolAdmin") {
        this.showRoot = true;
      }
      if (str == "teacher") {
        this.showRoot = false;
      }
      if (str == "branchAdmin") {
        this.showRoot = this.$route.query.branchId == this.$store.getters.branchId;
      }
    }
    if (this.$route.query.type == "edit") {
      this.$store.dispatch("startPolling");
    }
    if (this.type == "detail") {
      this.vuedraggable_disabled = true;
    }
    if (this.$route.query.workstationId) {
      console.log("变化this.form.workstationIds");
      this.form.workstationIds = this.$route.query.workstationId - 0;
    }
  },
  beforeDestroy() {
    window.removeEventListener("storage", this.handleStorageEvent);
    this.$nextTick(() => {
      this.$destroy();
    });
  },
  mounted() {
    //监听存储事件 实现跨标签页通信，更新当前考核/练习/作业 状态
    window.addEventListener("storage", this.handleStorageEvent);

    this.hostname = window.location.hostname;
    if (this.type == "add" || this.type == "edit") {
      this.getWorkstation();
      this.getDisciplineGroupList();
    }
    if (this.type == "add") {
      this.courseTemplate = this.$route.query.modelType;
      this.form.principalId = this.$store.getters.teacherId;
      if (this.courseTemplate == 1) {
        console.log("变化this.form.courseType");
        this.form.courseType = "3";
      }
      this.getTeacher();
      this.guid();
    } else {
      this.getcourseInfo();
    }
  },
  computed: {
    allLoading() {
      return this.$store.getters.courseIds.includes(this.form.courseId);
    },
    importProgress() {
      return this.$store.getters.importList.find(
        (item) => item.courseId === this.form.courseId
      )?.progress;
    },
  },
  methods: {
    //监听存储事件 实现跨标签页通信，更新当前考核/练习/作业 状态
    handleStorageEvent(event) {
      if (event.key == "refresh_paper_status_messages" && event.newValue) {
        this.getExceptionExam();
        this.$refs.ContentFormRef.getInfo();
        this.updateTreeItemData();
      }
    },
    async updateTreeItemData(){
      let res = await getCourseIndexTree(this.form.courseId);
      const { code, data } = res;
      if (code == 200) {
        let formattedTreeData = formatTreeData(data.children);
        let item = findItemById(this.selectedId, formattedTreeData, "id", "children")
        let arrKeys = [
          {
            key:'leaderScorePercent',
            value:item.leaderScorePercent,
          },
          {
            key:'homeworkLeaderScorePercent',
            value:item.homeworkLeaderScorePercent,
          },
          {
            key:'submitType',
            value:item.submitType,
          },
          {
            key:'homeworkSubmitType',
            value:item.homeworkSubmitType,
          }
        ]
        changeItemKeysById(this.courseIndexTree,this.selectedId,arrKeys)
      }
    },
    // 导入信息页
    handleAddInformation() {
      this.$refs.importInformation.show();
    },
    async getDisciplineGroupList() {
      try {
        let open = await disciplineGroup_onOffStatus();

        if (open.code == 200) {
          this.disciplineGroupOpen = open.data.onOffStatus == 1;
          if (this.disciplineGroupOpen) {
            let res = await disciplineList({
              schoolId: this.$store.getters.schoolId,
            });
            this.disciplineGroupList = res.data;
          }
        }
      } finally {
      }
    },
    //获取课程下有哪些目录存在异常考核
    async getExceptionExam() {
      try {
        let res = await getExceptionExam(this.form.courseId);
        const { code, data } = res;
        if (code == 200) {
          let formattedTreeData = formatTreeData(data);
          this.errorIdArr = filterIdsByType(data);
          this.exceptionTreeList = formattedTreeData;
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getisOpenResource() {
      let res = await isEnableNetdisk();
      this.isopenResourcce = res.data === 1;
    },
    /* 课程类型改变 */
    courseTypeChange(e) {
      if (e == 1) {
        this.form.majorType = "";
        this.form.majorNameId = "";
        this.$refs.form.clearValidate("majorType");
        this.$refs.form.clearValidate("majorNameId");
      }
    },

    /* 点击基本信息 */
    formTabClick() {
      console.log("tab点击", this.changed, this.changedIndex, this.active);
      // e.name != "0" &&
      if (this.type == "add" || this.type == "edit") {
        if (!this.form.courseId) {
          this.$modal.msg("请先保存基本信息");
          this.$nextTick(() => {
            this.active = "0";
          });
          return false;
        }
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            if (
              this.changed &&
              (this.changedIndex == "0" || this.changedIndex == "2")
            ) {
              let txt =
                this.changedIndex == "0"
                  ? "基本信息已修改，是否保存？"
                  : this.courseTemplate == 0
                  ? "通用课程资料已修改，是否保存？"
                  : "工学一体化文件已修改，是否保存？";
              this.$confirm(txt, "提示", {
                confirmButtonText: "保存",
                cancelButtonText: "不保存",
                type: "warning",
              })
                .then(() => {
                  this.changed = false;
                  this.handleAddCourse("tipsNeeded");
                })
                .catch(() => {});
            }

            if (this.active == 1) {
              //是否开启新手指导

              if (
                (this.$store.getters.guide == 0 ||
                  this.$store.getters.guide == 1) &&
                this.$store.getters.curRole == "teacher"
              ) {
                this.onboardingGuideShow = true;
                this.onboardingGuideStep = 4;
                this.$nextTick(() => {
                  // 确保 myElement 存在
                  if (this.$refs.studentScore) {
                    const rect =
                      this.$refs.studentScore.getBoundingClientRect();

                    this.onboardingGuideRect = {
                      top: rect.top,
                      left: rect.left + 30,
                    };
                    console.log("距离屏幕顶部:", this.onboardingGuideRect);
                  } else {
                    console.log("元素未找到");
                  }
                });
              } else {
                this.onboardingGuideShow = false;
              }
            }
          } else {
            this.$modal.msg("请先完善基本信息");
            this.$nextTick(() => {
              this.active = "0";
            });
            return false;
          }
        });
      }
    },
    /* 权限控制 */
    async learningResultStateInput() {
      let data = JSON.parse(JSON.stringify(this.form));
      await editCourseLearningResultstate(
        data.courseId,
        data.learningResultState
      )
      this.$modal.msgSuccess("修改权限成功");
    },
    downLoadFile(name) {
      let url = `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/workTemplate/${name}.docx`;
      location.replace(url);
    },
    //获取数组中指定属性的最大值
    getMaxPropertyValue(arr, propName) {
      if (arr.length === 0) {
        return null; // 如果数组为空，返回null或适当的默认值
      }

      return arr.reduce((maxValue, item) => {
        return item[propName] > maxValue ? item[propName] : maxValue;
      }, arr[0][propName]);
    },
    updateSubmitType(e) {
      console.log(e);
      changeItemById(this.courseIndexTree, this.selectedId, e.key, e.value);
    },
    updateLearnStatus(e) {
      changeItemById(this.courseIndexTree, this.selectedId, e.key, e.value);
    },
    // 用于生成xx/xxx/xxxx
    async getPathToNode(nodes, targetId, pathAccumulator = []) {
      for (const node of nodes) {
        // 如果当前节点匹配目标ID，说明路径构建完成，返回累积的路径
        if (node.id === targetId) {
          return [...pathAccumulator, node.name]; // 包含当前节点名称
        }

        // 递归查找子节点中的路径
        if (node.children && node.children.length > 0) {
          // 将当前节点的名称添加到路径中，然后递归查找
          const result = await this.getPathToNode(node.children, targetId, [
            ...pathAccumulator,
            node.name,
          ]);
          if (result) {
            return result; // 找到路径，返回
          }
        }
      }

      return null; // 未找到目标节点，返回null
    },
    handleClick_studyResults(e) {
      this.getPathToNode(this.courseIndexTree, e.id).then(async (path) => {
        console.log("handleClick_studyResults", e, path);
        this.preview = {
          coursePath: path ? path.join("/") : "",
          courseName: this.form.courseName,
          studentId: "",
          studentName: "",
        };
        this.dynamicTitle_studyResults = e.name;
        this.selectedId_studyResults = e.id;
        this.selectedType_studyResults = e.type;
      });
    },
    handleClick(e) {
      console.log("点击", e);
      this.selectedType = null;
      this.dynamicTitle = e.name;
      this.selectedId = e.id;
      this.selectedType = e.type;
      this.mustLearnStatus = e.mustLearnStatus;
    },
    async sortCourseIndex(ids) {
      let res = await sortCourseIndex(ids);
      const { code } = res;
      if (code == 200) {
        this.$modal.msgSuccess("排序成功！");
      }
    },
    async reCourseIndexName(data) {
      if (!data.renameFail) {
        let params = {
          id: data.id,
          name: data.name,
        };
        let res = await editCourseIndex(params);
        if (res.code == 200) {
          if (this.selectedId == data.id) {
            this.dynamicTitle = data.name;
          }
          this.$modal.msgSuccess("修改成功！");
        }
      }
    },
    deleteCourseIndex(item) {
      this.$confirm(
        `确认删除【${item.name}】？ ${
          item.type == 3 ? "" : `删除后，其下所有子目录也将被删除，是否继续？`
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: "正在处理...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.3)",
          });
          let params = {
            deleteTopic: item.deleteTopic,
          };
          let res = await deleteCourseIndex(item.id, params);
          if (res.code == 200) {
            loading.close();
            this.$modal.msgSuccess("删除成功！");
            this.deleteId = item.id;
            //若删除的是当前选中的节点 item 获取同级节点没有的话取父级
            if (this.selectedId == item.id) {
              //获取同级item
              let siblingItem = getSiblingItem(this.courseIndexTree, item.id);
              if (siblingItem) {
                this.handleClick(siblingItem);
              }
            }
            removeItemById(this.courseIndexTree, item.id);
            //获取课程下有哪些目录存在异常考核
            this.getExceptionExam();
          } else {
            loading.close();
          }
        })
        .catch(() => {
          this.$modal.msgInfo("已取消");
        });
    },
    // 展开关闭操作
    handlechange(e) {
      this["isClose_" + e] = !this["isClose_" + e];
      if (this["isClose_" + e]) {
        this.$refs[e + "_trees_ref"].expandAll();
      } else {
        this.$refs[e + "_trees_ref"].collapseAll();
      }
    },
    // 展开关闭操作
    handleTurn() {
      this.isClose_abnormal = !this.isClose_abnormal;
      if (this.isClose_abnormal) {
        this.$refs["abnormal_trees_ref"].expandAll();
      } else {
        this.$refs["abnormal_trees_ref"].collapseAll();
      }
    },
    async getCourseIndexTree() {
      let res = await getCourseIndexTree(this.form.courseId);
      const { code, data } = res;
      if (code == 200) {
        let formattedTreeData = formatTreeData(data.children);
        console.log(formattedTreeData, "formatTreeData");
        if (this.active == 1) {
          this.courseIndexTree = formattedTreeData;
          this.selectedId = formattedTreeData[0].id;
        }
        if (this.active == 4) {
          this.resultIndexTree = formattedTreeData;
        }
      }
    },
    async getMajorNameList(num) {
      console.log("变化this.form.majorNameId");
      if (num) {
        this.form.majorNameId = "";
      }
      let params = {
        majorTypeNum: this.form.majorType,
        pageNum: 1,
        pageSize: 9999,
      };
      let res = await getMajorNameList(params);
      if (res.code == 200) {
        if (!this.form.majorType) {
          this.majorNameList = [];
        } else {
          this.majorNameList = res.rows;
        }
      }
    },
    //课堂实录上传
    upload_transcriptOfTheClass(e) {
      this.form.classRecord = JSON.stringify(e);
    },
    //说课视频上传
    uploadVideo(e) {
      this.form.courseVideo = JSON.stringify(e);
    },
    //更多文档上传
    uploadFiles(e) {
      this.form.moreDoc = JSON.stringify(e);
    },
    uploadWorkFiles(e, key) {
      this.form[key] = JSON.stringify(e);
    },

    /* 分值配置按钮 */
    handleScoreBox() {
      this.score_open = true;
      this.onboardingGuideShow = false;
      this.score_type = this.$route.query.type;
    },
    //显示题库
    showTopicBank() {
      const routeData = this.$router.resolve({
        path: "/topicBank",
        query: {
          courseId: this.form.courseId,
          enterType: 1,
        },
      });
      window.open(routeData.href, "_blank");
    },
    fammterTeacher(value) {
      this.commonTeacher = [];
      console.log("变化this.form.teacherIds");
      this.form.teacherIds = [];
      for (const teacher of this.teachers) {
        if (teacher.teacherId != value) {
          let obj = {
            ...teacher,
          };
          this.commonTeacher.push(obj);
        }
      }
    },
    guid() {
      console.log("变化this.form.dirName");
      this.form.dirName = uuidv4();
    },
    addExamByContentForm(e) {
      console.log(e, "addExamByContentForm")
      changeItemById(this.courseIndexTree, this.selectedId, e.key, e.id);
    },
    //添加内容层 返回函数
    addContentReturn(e) {
      console.log(e);
      e.showRename = false;
      //直接更新原数据，增加用户体验
      addToChildren(this.courseIndexTree, this.indexParentId, e);
    },
    handleAddContent(item) {
      console.log(item);
      this.indexParentId = item.id;
      this.addContentOpen = true;
      this.addContentType = "content";
      if (!item.children || item.children.length == 0) {
        this.addContentSort = 1;
      } else {
        let maxSort = this.getMaxPropertyValue(item.children, "sort");
        this.addContentSort = maxSort - 0 + 1;
      }
    },
    handleAddFinish(item) {
      console.log(item);
      this.indexParentId = item.id;
      this.addContentOpen = true;
      this.addContentType = "finish";
      if (!item.children || item.children.length == 0) {
        this.addContentSort = 1;
      } else {
        let maxSort = this.getMaxPropertyValue(item.children, "sort");
        this.addContentSort = maxSort - 0 + 1;
      }
    },

    /* 添加步骤组件 返回函数 */
    addLinkReturn(e) {
      console.log(e);
      e.showRename = false;
      //直接更新原数据，增加用户体验
      addToChildren(this.courseIndexTree, this.indexParentId, e);
    },
    // 添加目录
    handleAddLink(item) {
      console.log(item);
      this.indexParentId = item.id;
      this.addLinkOpen = true;
      if (!item.children || item.children.length == 0) {
        this.addLinkSort = 1;
      } else {
        let maxSort = this.getMaxPropertyValue(item.children, "sort");
        this.addLinkSort = maxSort - 0 + 1;
      }
    },
    /* 添加任务组件 返回函数 */
    addTaskReturn(e) {
      /* 返回整个任务对象 */
      console.log(e, "e");
      e.showRename = false;
      //如果是工学一体模版   终结性考核要保持一直在最后
      if (this.courseTemplate == 1) {
        e.children = formatTreeData(e.children);
        this.courseIndexTree.splice(this.courseIndexTree.length - 1, 0, e);
      } else {
        //直接更新原数据，增加用户体验
        this.courseIndexTree.push(e);
      }
    },
    /* 添加任务 */
    async handleAddTask() {
      this.addTaskOpen = true;
      //如果是工学一体模版   终结性考核要保持一直在最后,所以sort要比正常条件下-1
      if (this.courseTemplate == 1) {
        this.addTaskSort = this.courseIndexTree.length;
      } else {
        //正常模式直接取数组长度排序
        if (this.courseIndexTree.length == 0) {
          this.addTaskSort = this.courseIndexTree.length + 1;
        } else {
          let maxSort = this.getMaxPropertyValue(this.courseIndexTree, "sort");
          this.addTaskSort = maxSort - 0 + 1;
        }
      }
    },
    async initTemplate(courseId, type, loading) {
      let res = await initTemplate(courseId);
      if (res.code == 200) {
        let arr = res.data.children;
        arr = this.courseIndexTree.concat(arr);
        let formattedTreeData = formatTreeData(arr);
        console.log(formattedTreeData, "formatTreeData");
        this.courseIndexTree = formattedTreeData;
        if (type == "tipsNeeded&next") {
          loading.close();
          this.active = "1";
          this.$modal.msgSuccess("保存成功");
        }
      }
    },
    /* 获取课程信息 */
    async getcourseInfo() {
      let res = await getCourseDetial(this.$route.query.courseId);
      res.data.framePic = res.data.framePic ? res.data.framePic.split(",") : [];
      res.data.teachingPlacePic = res.data.teachingPlacePic
        ? res.data.teachingPlacePic.split(",")
        : [];
      res.data.teacherIds = res.data.teacherIds
        ? res.data.teacherIds.split(",")
        : "";
      let teachArr = [];
      if (res.data.teacherIds) {
        for (const item of res.data.teacherIds) {
          teachArr.push(item - 0);
        }
      }
      res.data.teacherIds = teachArr;
      res.data.courseType = res.data.courseType + "";
      //题库  props要用
      this.topicCategoryId = res.data.topicCategoryId
        ? res.data.topicCategoryId
        : "";
      this.form = JSON.parse(JSON.stringify(res.data));
      if (
        !this.form.learningResultState &&
        this.form.learningResultState != "0"
      ) {
        this.form.learningResultState = 1;
      }
      //是否是工学一体模版
      this.courseTemplate = this.form.courseTemplate;
      if (this.type == "add" || this.type == "edit") {
        this.getTeacher();
      }
      this.loading = false;
    },

    /* 保存并下一步按钮（用于添加课程和编辑课程） 这个过程的话是已经生成courseid */
    handleAddCourse(type) {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在保存中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.3)",
          });
          let data = JSON.parse(JSON.stringify(this.form));
          data.schoolId = this.$store.getters.schoolId;
          data.teacherIds = data.teacherIds ? data.teacherIds.join(",") : "";
          data.framePic = data.framePic.join(",");
          data.teachingPlacePic = data.teachingPlacePic.join(",");
          data.studyTime = data.studyTime ? data.studyTime : 0;
          data.status = 2;
          data.courseTemplate = this.courseTemplate;
          data.temporaryState = 0;
          if (this.$route.query.type == "edit" || this.form.courseId) {
            let res = await editCourse(data);
            if (res.code == 200) {
              this.changed = false;
            }
            if (type == "tipsNeeded&next") {
              this.active = "1";
              this.$modal.msgSuccess("保存成功");
            }
            loading.close();
          } else {
            let res = await addCourse(data);
            if (res.code == 200) {
              this.changed = false;
              this.form.courseId = res.data.courseId;
              this.form.indexId = res.data.indexId;
              //如果是工学一体模版   获取模板
              if (this.courseTemplate == 1) {
                this.initTemplate(this.form.courseId, type, loading);
              } else {
                this.active = "1";
                loading.close();
              }
            }
          }
          if (type == "tipsNeeded") {
            loading.close();
            this.$modal.msgSuccess("保存成功");
          }
        } else {
          let arr = [
            {
              idName: "course_name",
              value: this.form.courseName,
            },
            {
              idName: "course_type",
              value: this.form.courseType,
            },
            {
              idName: "major_type",
              value: this.form.majorType,
            },
            {
              idName: "major_name_id",
              value: this.form.majorNameId,
            },
            {
              idName: "course_pic",
              value: this.form.coursePic,
            },
            {
              idName: "study_time",
              value: this.form.studyTime,
            },
          ];
          for (const arrElement of arr) {
            if (!arrElement.value) {
              this.scrollToAnchor(arrElement.idName);
              return;
            }
          }
        }
      });
    },
    scrollToAnchor(id) {
      const anchor = document.getElementById(id);
      if (anchor) {
        anchor.scrollIntoView({ behavior: "smooth" });
      }
    },
    /* 驳回组件返回 */
    reasonDiaReturn(e) {},

    // 组件上传多张封面
    uploadImgsFrame(target, type) {
      console.log(target, type);
      let max = type == "framePic" ? 10 : 5;
      if (this.form[type].length + target.files.length > max) {
        this.$modal.msgWarning("最多上传" + max + "张");
        target.value = "";
        return false;
      }
      let parh = "";
      parh = fammterString(2, this.form.dirName);
      uploadOSS(target.files, parh).then((res) => {
        this.form[type] = [...this.form[type], ...res];
      });
      target.value = "";
    },
    delframePic(index) {
      this.form.framePic.splice(index, 1);
    },
    delteachingPlacePic(index) {
      this.form.teachingPlacePic.splice(index, 1);
    },
    /* 任务分类,任务分类组件打开前 ：先判断是否有ccCourseChapterTypeList，
            如果没有则说明没有编辑过，或者不是获取课程信息来的这个页面，
            需要主动创造一个ccCourseChapterTypeList */
    handleTaskClassification() {
      this.taskClassificateOpen = true;
    },
    /* 任务分类组件返回函数 返回数组 */
    taskClassificateReturn(e) {
      console.log(e);
      processTree(this.courseIndexTree, e.mastData, e.chooseData);
    },
    // 获取教师列表 teacherId name
    getTeacher() {
      listPost_teacher({
        pageNum: 1,
        status: 0,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId,
      }).then((response) => {
        this.teachers = response.rows;
        for (const teacher of this.teachers) {
          if (teacher.teacherId != this.form.principalId) {
            let obj = {
              ...teacher,
            };
            this.commonTeacher.push(obj);
          }
        }
      });
    },
    // 获取工作站列表 teacherId name
    async getWorkstation() {
      let response = await listPost_workstation({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId,
        status: 0,
      });
      this.workstations = response.rows;
    },
    coverResult(e) {
      this.form.coursePic = e;
    },
    editCropper() {
      this.vuecutshow = true;
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .passAllStatus .el-radio {
  margin-right: 5px;
}

::v-deep .passAllStatus .el-radio .el-radio__label {
  padding-left: 0;
}

@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  font-size: 14px;

  &:active {
    background: darken($bg_color, 10%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 10%);
    color: lighten($color, 40%);
  }

  @content;
}

.detailbottom {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;

  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    border-radius: 8px;
    line-height: 38px;
    height: 40px;
  }
}

// .baseInfo::-webkit-scrollbar {
//   display: none;
// }
.baseInfo {
  height: calc(100vh - 120px - 72px - 72px);
  overflow: auto;
}

.card {
  margin: 15px auto 0 auto;
  width: 1200px;
  height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
  padding-top: 24px;
  box-shadow: 0 0 8px 0 rgba(9, 28, 61, 0.17);

  ::v-deep .el-tabs__item {
    height: 46px !important;
    line-height: 46px !important;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding-left: 73px;
  }

  ::v-deep .el-tabs__header {
    margin: 0 0 0 0;
  }
}

//树列表盒子
.taskListBox {
  width: 320px;
  max-height: calc(100vh - 190px);
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &_title {
    box-sizing: border-box;
    padding: 0 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;

    .courseName {
      width: 150px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 45px;
    }

    .allExpand {
      user-select: none;

      img {
        margin: auto 4px auto 0;
        width: 16px;
        height: 16px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
    }
  }

  &_btns {
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .btn_item {
      cursor: pointer;
      user-select: none;
      width: 144px;
      height: 32px;
      background: #f7f9fa;
      border-radius: 8px;
      border: 1px solid #edeff0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      .exam_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/topic_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .score_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/score_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .task_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/asstask_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .ai_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/aiImport.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      &:hover {
        .exam_img {
          background-image: url("../../assets/images/courseAdd/topic_collect_act.png");
        }

        .score_img {
          background-image: url("../../assets/images/courseAdd/score_collect_act.png");
        }

        .task_img {
          background-image: url("../../assets/images/courseAdd/asstask_collect_act.png");
        }
        .ai_img {
          background-image: url("../../assets/images/courseAdd/aiImport_act.png");
        }

        color: #28b28b;
      }
    }
  }

  &_tip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    padding: 0 0 12px 10px;
  }

  &_tree {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
  }
}

// 章节信息盒子
.taskInfoBox {
  flex: 1;

  .topLine {
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 45px;
  }

  .box {
    height: calc(100vh - 330px);
  }
}

.framePic {
  .close {
    display: none;
  }
}

.framePic:hover {
  .close {
    display: block;
  }
}

.taskLine_actvie {
  background: rgba(5, 192, 173, 0.08);
}

.taskLine {
  width: 100%;
  height: 35px;

  .more {
    width: 18px;
    height: 12px;
    margin: 13px 7px 0 0;
  }

  .arrow90 {
    transform: rotate(0) !important;
  }

  .arrow {
    transition: all 0.5s;
    transform: rotate(-90deg);
    margin: auto 16px auto 15px;
    width: 16px;
    height: 16px;
  }

  .name {
    width: 184px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 35px;
  }

  .status {
    text-align: center;
    margin: auto 0 auto 3px;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 16px;
  }
}

.taskLine:hover {
  background: rgba(5, 192, 173, 0.08);
}

.linkLine:hover {
  background: rgba(5, 192, 173, 0.08);
}

.linkLine {
  justify-content: space-between;
  align-items: center;
  height: 42px;

  .more {
    width: 18px;
    height: 12px;
    margin: 0 7px 0 0;
  }

  .statusblock {
    width: 76px;

    .status {
      margin-left: 18px;
      width: 56px;
      height: 16px;
      background: #ea3555;
      border-radius: 12px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
    }
  }

  .name {
    width: 200px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
  }
}

.uploadCourseFramePic {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 102px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      background: #ed5565;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 100px;
      height: 100px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}

// 上传封面样式
.uploadCourseCover {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 162px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 160px;
      height: 100px;
      border-radius: 4px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}

.w_374 {
  width: 374px;
}

.w_289 {
  width: 289px;
}

.topicListDiv {
  width: 100%;
  height: 600px;
}

.detail_height {
  height: calc(100vh - 236px) !important;
}

.label_text {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-top: 20px;
  padding-left: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.more_files {
  padding-right: 20px;
  margin-top: 10px;
  padding-left: 130px;
  box-sizing: border-box;
}

.abnormal_tip {
  width: 299px;
  top: 16px;
  right: 40px;
  position: absolute;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .top {
    width: 100%;
    height: 42px;
    background: #fa8d7f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    user-select: none;

    .el-icon-warning {
      color: #ff2104;
      font-size: 24px;
    }

    .el-icon-arrow-down {
      color: #ffffff;
      font-size: 24px;
      transition: all 0.3s ease;
    }

    .rotate_180 {
      transform: rotate(180deg);
    }
  }

  .content {
    width: 100%;
    height: 0;
    background: #ffffff;
    overflow: auto;
    transition: all 0.3s ease;

    .all_expand {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        padding: 4px 6px;
        box-sizing: border-box;

        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }

    .tree {
      height: 500px;
      overflow: auto;
    }
  }

  .actived {
    height: 540px;
  }
}
</style>
